<template>
  <view class="preview-content relative">
    <swiper
      class="h-full"
      circular="true"
      @change="handleSwiper"
      :current="current"
    >
      <swiper-item
        v-for="(item, index) in bigUrlList"
        class="h-full relative"
        :key="item._id"
      >
        <image
          v-if="readedImgidList.includes(index)"
          :src="item.bigUrl"
          class="h-full w-full"
          mode="aspectFill"
        ></image>
      </swiper-item>
    </swiper>

    <view class="back flex items-center justify-center" @click="handleBack">
      <uni-icons type="left" color="white"></uni-icons>
    </view>
    <view class="number flex items-center justify-center">
      <text class="text-white">{{ current + 1 }}/</text>
      <text class="text-white">{{ total }}</text>
    </view>
    <view class="time flex flex-col justify-center items-center">
      <text class="text-white hour">
        {{ timeformat1 }}
      </text>
      <text class="text-white date mt-3">
        {{ timeformat2 }}
      </text>
    </view>
    <view class="footer flex absolute">
      <view
        class="flex flex-col footer-item items-center justify-center"
        @click="handleShowInfo"
      >
        <uni-icons size="28" type="info"></uni-icons>
        <text>信息</text>
      </view>
      <view
        class="flex flex-col footer-item items-center justify-center"
        @click="handleRate"
      >
        <uni-icons size="28" type="star"></uni-icons>
        <text>5分</text>
      </view>
      <view class="flex flex-col footer-item items-center justify-center">
        <uni-icons size="28" type="download"></uni-icons>
        <text>下载</text>
      </view>
    </view>
    <uni-popup ref="popupRef" type="bottom">
      <view class="popup-content">
        <view class="header items-center h-10 justify-between flex">
          <view class="p-2 side"></view>
          <view class="title flex-1 text-center text-sm">壁纸信息</view>
          <view class="p-2 side">
            <uni-icons
              size="22"
              type="closeempty"
              @click="popupRef.close()"
            ></uni-icons>
          </view>
        </view>
        <scroll-view scroll-y class="popup-content-info">
          <view class="flex info-row items-baseline">
            <text class="info-label">壁纸ID：</text>
            <text class="info-content">asdsa</text>
          </view>
          <view class="flex info-row items-baseline">
            <text class="info-label">分类：</text>
            <text class="info-content text-primary">asdsa</text>
          </view>
          <view class="flex info-row items-baseline">
            <text class="info-label">发布者：</text>
            <text class="info-content">2321312</text>
          </view>
          <view class="flex info-row items-baseline">
            <text class="info-label">评分：</text>
            <view class="info-content flex items-center h-full">
              <uni-rate value="5" readonly :touchable="false"></uni-rate>
              <view class="ml-2">5分</view>
            </view>
          </view>
          <view class="flex info-row items-baseline">
            <text class="info-label">摘要：</text>
            <text class="info-content">qwewqefas</text>
          </view>
          <view class="flex info-row items-baseline">
            <text class="info-label">标签：</text>
            <view class="info-content flex h-full items-center">
              <view
                class="border-primary rounded-full px-2 py-1 mr-2 text-xs border-[1rpx] border-solid"
                >标签1</view
              >
              <view
                class="border-primary rounded-full px-2 py-1 mr-2 text-xs border-[1rpx] border-solid"
                >标签2</view
              >
              <view
                class="border-primary rounded-full px-2 py-1 mr-2 text-xs border-[1rpx] border-solid"
                >标签3</view
              >
            </view>
          </view>
          <view class="mt-4 mb-8 p-2">
            <view
              class="copyright rounded-sm p-2 bg-[#eeeeee] text-primary text-sm"
            >
              声明:本图片来用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸维护您的权益。
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup ref="scorePopup" type="center">
      <view class="score-popup-content bg-white p-4 rounded-lg flex flex-wrap">
        <view class="text-center w-full text-primary">{{
          ratePopupTitle
        }}</view>
        <view class="w-full flex mt-4 justify-center">
          <uni-rate v-model="myScore" :allow-half="true"></uni-rate>
        </view>
        <view class="w-full flex justify-center mt-4">
          <button size="mini" @click="confirmRate" plain>确认评分</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
const cacheClasslist = ref([]);
const now = dayjs();
const timeformat1 = now.format("HH:mm");
const timeformat2 = now.format("MM月DD日");
const total = ref(0);
const current = ref(0);
const popupRef = ref(null);
const scorePopup = ref(null);
const readedImgidList = ref([]);

const pushReadedImgid = (idx) => {
  const temp = [...readedImgidList.value];
  const len = cacheClasslist.value.length;
  temp.push(idx);
  if (idx === 0) {
    temp.push(idx + 1);
    temp.push(len - 1);
  } else if (idx === len - 1) {
    temp.push(idx - 1);
    temp.push(0);
  } else {
    temp.push(idx - 1);
    temp.push(idx + 1);
  }
  readedImgidList.value = [...new Set(temp)];
  console.log(readedImgidList.value, "  readedImgidList.value ");
};

onLoad((option) => {
  const initId = option.id;
  cacheClasslist.value = uni.getStorageSync("cacheClasslist") || [];
  const initIndex = cacheClasslist.value.findIndex(
    (item) => item._id === initId
  );
  current.value = initIndex;

  total.value = cacheClasslist.value.length;
  pushReadedImgid(initIndex);
});

const ratePopupTitle = computed(() => {
  return "我要评分";
});

const bigUrlList = computed(() => {
  return cacheClasslist.value.map((item) => ({
    ...item,
    bigUrl: item.smallPicurl.replace("_small.webp", ".jpg"),
  }));
});

const handleBack = () => {
  uni.navigateBack();
};
const myScore = ref(0);

const handleSwiper = (event) => {
  current.value = event.detail.current;
  pushReadedImgid(current.value);
};

const handleShowInfo = () => {
  typeof popupRef.value?.open === "function" && popupRef.value.open("bottom");
};

const handleRate = () => {
  console.log("评分：", myScore.value);
  scorePopup.value.open();
};

const confirmRate = () => {
  scorePopup.value.close();
};
</script>

<style lang="scss" scoped>
.preview-content {
  height: 100vh;
  .mask {
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .back {
    position: absolute;
    top: 3vh;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    left: 30rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.2);
  }
  .time {
    top: calc(10vh + 100rpx);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .number {
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: 50rpx;
    padding: 0 20rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10rpx);
  }
  .hour {
    font-size: 120rpx;
  }
  .date {
    font-size: 40rpx;
  }
  .footer {
    height: 160rpx;
    bottom: 10vh;
    width: 70vw;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20rpx);
    border-radius: 80rpx;
    .footer-item {
      flex: 1;
      :deep() {
        .uni-icons {
          color: $text-font-color-2 !important;
        }
      }
      padding: 2rpx 12rpx;
      color: $text-font-color-2;
      height: 100%;
    }
  }
  .popup-content {
    border-radius: 40rpx 40rpx 0 0;
    background-color: #fff;
    .header {
      width: 100vw;
      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }
    }
    .title {
      color: $brand-theme-color;
    }
    .side {
      width: 40rpx;
      box-sizing: content-box;
    }
    .popup-content-info {
      height: 750rpx;
      .info-row {
        margin-top: 20rpx;
        min-height: 60rpx;
        .info-label {
          width: 160rpx;
          text-align: right;
          color: $brand-theme-color;
        }
        .info-content {
          width: calc(100% - 160rpx);
          word-break: break-all;
        }
      }
    }
  }
}
</style>
